<%@ page import="com.useeinfo.oa.modules.security.enums.OperationRoleEnum" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<div class="main-content">
    <div class="box box-main">
        <form id="inputForm" model="post" action="<c:url value="/web/admin/systemUser/executeSystemUserEdit.action"/>"
              method="post" class="form-horizontal">
            <div class="box-body">
                <div class="form-unit">基本信息</div>
                <input id="userId" name="id" value="${systemUser.id}" type="hidden">
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required ">*</span> 手机号：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input path="userAccount" name="userAccount" value="${systemUser.userAccount}"
                                       maxlength="100" class="form-control required "/>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required">*</span> 姓名：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input path="userName" name="userName" maxlength="100" value="${systemUser.userName}"
                                       class="form-control required "/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box-body">
                <div class="form-unit">选择账号类型</div>
                <div class="row" style="margin:0!important;padding-left: 6%;">
                    <div>
                        <div class="ibox tabs-container ibox-content">
                            <label class="radio-inline">
                                <input type="radio"
                                       <c:if test="${systemUser.operationRole=='admin'||systemUser.operationRole==''||systemUser.operationRole==null}">checked="checked"</c:if>
                                       value="<%=OperationRoleEnum.admin.getCode()%>" id="role1"
                                       name="operationRole"
                                       onclick="changeContent('<%=OperationRoleEnum.admin.getCode()%>')"><%=OperationRoleEnum.admin.getName()%>
                            </label>
                            <label class="radio-inline">
                                <input type="radio"
                                       <c:if test="${systemUser.operationRole=='enterprise'}">checked="checked"</c:if>
                                       value="<%=OperationRoleEnum.enterprise.getCode()%>" id="role2"
                                       name="operationRole"
                                       onclick="changeContent('<%=OperationRoleEnum.enterprise.getCode()%>')"><%=OperationRoleEnum.enterprise.getName()%>
                            </label>
                        </div>
                        <div style="margin-top: 10px;min-height: 100px;">
                            <div class="ibox tabs-container ibox-content hide" id="enterpriseContent">
                                <input type="hidden" id="enterpriseData" name="enterpriseData">
                                <script id="enterpriseTpl" type="text/template">
                                    <div id="ordinary_all_{{d.key}}">
                                        <div class="select-width10 float-left select-top1" id="enterprise_{{d.key}}">
                                            <div class="select-width1 select-top1 float-left">
                                                企业：
                                            </div>
                                            <div class="select-width5 float-left select-left0_5">
                                                <input path="enterpriseId_" id="enterpriseId_{{d.key}}"
                                                       name="enterpriseId"
                                                       class="form-control select-width10">
                                            </div>
                                            <div class="select-width2 float-left">
                                                <i class="select-left1"></i>
                                                <a href="#" class="btn btn-sm btn-default" id="delete_{{d.key}}"
                                                   title="删除" onclick="removeEnterprise(this)" sValue="{{d.key}}"><i
                                                        class="fa fa-minus"></i></a>
                                                <a href="#" class="btn btn-sm btn-default" title="新增" id="add_{{d.key}}"
                                                   sValue="{{d.key}}"
                                                   onclick="addEnterprise()"><i class="fa fa-plus"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i>
                            保 存
                        </button>&nbsp;

                        <button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="closeView()"><i
                                class="fa fa-times"></i> 关 闭
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $("#inputForm").validate({
        submitHandler: function (form) {
            getEnterData();
            js.ajaxSubmitForm($(form), function (data) {
                js.showMessage(data.msg);
                if (data.status == Global.NO) {
                    closeView();
                    $('#dataGrid').dataGrid("refresh");
                }
            }, "json");
        }
    });

    var select_enterprise = $('#select_enterprise').magicSuggest({
        allowFreeEntries: false,
        data: '<c:url value="/web/admin/enterprise/getEnterpriseListMagic.action" />',
        queryParam: 'q',
        valueField: "value",
        displayField: "text",
        maxSelection: 1,
        noSuggestionText: '',
        placeholder: '选择企业',
        required: true,
        autoSelect: true,
        selectFirst: true,
        value: magicSuggestValue('')
    });

    function closeView() {
        layer.close(LayWin['wSystemUser']);
    }

    function changeContent(index) {
        var _this = $("#" + index + "Content");
        hideAllContent();
        _this.removeClass("hide");
    }

    function hideAllContent() {
        if (!$("#enterpriseContent").hasClass("hide")) {
            $("#enterpriseContent").addClass("hide");
        }
    }

    var ordinaryKey = 1;
    var operationRole = '${systemUser.operationRole}';
    $(document).ready(function () {
        if (operationRole === 'enterprise') {
            getUserEnterprise();
        } else {
            addEnterprise();
        }
    });

    function getUserEnterprise() {
        $.ajax({
            type: 'POST',
            url: "<c:url value="/web/admin/systemUser/getUserEnterPrise.action"/>",
            data: {
                id: $("#userId").val()
            },
            dataType: 'json',
            async: false,
            error: function (data) {
                js.showErrorMessage(data.responseText);
            },
            success: function (data, status, xhr) {
                if (data.status == Global.NO) {
                    $("#enterpriseContent").removeClass("hide");
                    $.each(data.data, function (index, value, array) {
                        addEnterprise(value);
                    });
                } else {
                    js.showErrorMessage(data.msg);
                }
            }
        });
    }

    function removeEnterprise(_this) {
        var input = $(_this).parent().parent().parent();
        input.remove();
        if (ordinaryKey > 1) {
            ordinaryKey--;
        }
    }

    function addEnterprise(id) {
        if (id === undefined) {
            id = "";
        }
        $('#enterpriseContent').append(js.template('enterpriseTpl', {
            key: ordinaryKey
        }));
        if (ordinaryKey === 1) {
            $("#delete_" + ordinaryKey).addClass("hide");
        }
        var enterpriseId_ = $('#enterpriseId_' + ordinaryKey).magicSuggest({
            allowFreeEntries: false,
            data: '<c:url value="/web/admin/enterprise/getEnterpriseListMagic.action?id=" />' + id,
            queryParam: 'q',
            valueField: "value",
            displayField: "text",
            maxSelection: 1,
            noSuggestionText: '',
            placeholder: '请选择',
            required: true,
            autoSelect: true,
            selectFirst: true,
            value: magicSuggestValue('' + id + '')
        });
        ordinaryKey++;
    }

    function getEnterData() {
        var data = new Array();
        var name = "enterpriseId[]";
        $("input[name='" + name + "']").each(function (j, item) {
            if (!data.contains(item.value)) {
                data.push(item.value);
            }
        });
        $("#enterpriseData").val(data);
    }

    Array.prototype.contains = function (needle) {
        for (var i in this) {
            if (this[i] == needle) return true;
        }
        return false;
    }
</script>


